<template>
  <Header></Header>
  <el-row>
    <el-col :span="1"><div class="grid-content ep-bg-purple" /></el-col>
    <el-col :span="22">
      <router-view></router-view>
    </el-col>
    <el-col :span="1"><div class="grid-content ep-bg-purple" /></el-col>
  </el-row>
  <Footer></Footer>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "App",
});
</script>
<script lang="ts" setup>
import { storeToRefs } from "pinia";
import { useRoute } from "vue-router";
import { nextTick, onMounted, ref } from "vue";
import useIdenxState from "@/views/Index/hooks";
const idenxState = useIdenxState();
const { isAppAdd } = storeToRefs(idenxState);
const { addIndexInfoList } = idenxState;
const route = useRoute();
onMounted(() => {
  nextTick(() => {
    window.onscroll = function () {
      // scrollTop是滚动条滚动时，距离顶部的距离
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      // windowHeight是可视区的高度
      let windowHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      // scrollHeight是滚动条的总高度
      let scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      // 滚动条到底部
      if (scrollTop + windowHeight >= scrollHeight) {
        // 到了底部之后想做的操作,如到了底部之后加载
        if (route.name === "Recommend" && isAppAdd.value) {
          addIndexInfoList(); //加载函数
        }
      }
    };
  });
});
</script>

<style lang="scss">
body {
  background: #f5f7f9;
}
</style>
